<template>
  <ContentBox has-corner class="community-video">
    <div class="community-video__content">
      <div class="community-video__content__title">
        <div>{{ datetime }}</div>
        <div>
          更多
          <img :src="moreBtn" class="more-btn" />
        </div>
      </div>
      <div class="community-video__content__video">
        <div class="cover" @click="handleOpenModal('', videoSrc)"></div>
        <iframe @click="handleOpenModal('', videoSrc)" class="video1" :src="videoSrc"></iframe>
      </div>
      <div class="community-video__content__text">
        <div>{{ communityName }}-{{ address }}</div>
        <div>{{ carNo }}</div>
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import moreBtn from '@/assets/more-btn.png'
import placeholder from '@/assets/placeholder.png'
export default {
  name: 'CommunityVideo',
  components: {
    ContentBox
  },
  props: {
    datetime: {
      type: String,
      default: '2021-08-01 00:00:01'
    },
    carNo: {
      type: String,
      default: 'A000001'
    },
    communityName: {
      type: String,
      default: '安居苑'
    },
    address: {
      type: String,
      default: '西南门'
    },
    videoSrc: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      moreBtn,
      placeholder
    }
  },
  methods: {
    handleOpenModal () {
      this.$store.commit('SET_VIDEO_DIALOG', {
        visible: true,
        type: '',
        videoSrc: this.videoSrc
      })
    }
  }
}
</script>

<style lang="scss">
.community-video {
  width: $base * 360px;
  height: $base * 270px;
  .community-video__content {
    padding: $base * 13px $base * 20px;
  }
  .community-video__content__title {
    color: #fff;
    font-size: $base * 14px;
    display: flex;
    justify-content: space-between;
  }
  .community-video__content__video {
    height: $base * 180px;
    margin-top: $base * 10px;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  .community-video__content__text {
    display: flex;
    justify-content: space-between;
    font-size: $base * 14px;
    color: #fff;
    height: $base * 27px;
    line-height: $base * 27px;
    background: $video_bg;
    padding: 0 $base * 8px;
  }
  .more-btn {
    width: $base * 14px;
    height: $base * 14px;
    margin-left: $base * 5px;
  }
}

iframe {
  border: none;
}
.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}
</style>